<div class="container">
    <h1 class="title is-size-1 has-text-centered">Shared Lists</h1>
    <p class="mb-4">Shared lists are lists where items can be dragged from one list to the other and vice-versa. Providing the same "Group" string name for both lists is what links them together. Note that when an item is dragged into a different list, it assumes the visual style of that list. This is because Blazor controls the rendering of the list items.</p>
    <Tabs CodeContent="@codeContent">
        <ExampleContent>
            <div class="columns">
                <div class="column">
                    <SortableList Id="shared1" Group="sharedLists" Items="items1" Context="item" OnRemove="ListOneRemove">
                        <SortableItemTemplate>
                            <div class=" card has-border-dark has-background-white">
                                <p class="is-size-4 p-2 ml-4">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
                <div class="column">
                    <SortableList Id="shared2" Group="sharedLists" OnRemove="ListTwoRemove" Items="items2" Context="item">
                        <SortableItemTemplate>
                            <div class="card has-background-white has-border-dark">
                                <p class="is-size-4 p-2 ml-4">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
            </div>
        </ExampleContent>
    </Tabs>
</div>

@code {

    private string codeContent = $@"
    <SortableList Group=""sharedLists"" Items=""items1"" Context=""item"" OnRemove=""ListOneRemove"">
        <SortableItemTemplate>
            <div class="" card has-border has-background-white"">
                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
            </div>
        </SortableItemTemplate>
    </SortableList>
    <SortableList Group=""sharedLists"" OnRemove=""ListTwoRemove"" Items=""items2"" Context=""item"">
        <SortableItemTemplate>
            <div class=""card has-background-white has-border"">
                <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
            </div>
        </SortableItemTemplate>
    </SortableList>

    @code {{
        private void ListOneRemove((int oldIndex, int newIndex) indices)
        {{
            // get the item at the old index in list 1
            var item = items1[indices.oldIndex];

            // add it to the new index in list 2
            items2.Insert(indices.newIndex, item);

            // remove the item from the old index in list 1
            items1.Remove(items1[indices.oldIndex]);
        }}

        private void ListTwoRemove((int oldIndex, int newIndex) indices)
        {{
            // get the item at the old index in list 2
            var item = items2[indices.oldIndex];

            // add it to the new index in list 1
            items1.Insert(indices.newIndex, item);

            // remove the item from the old index in list 2
            items2.Remove(items2[indices.oldIndex]);
        }}
    }}
    ";

    public List<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();

    public List<Item> items2 = Enumerable.Range(11, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();

    private void ListOneRemove((int oldIndex, int newIndex) indices)
    {
        // get the item at the old index in list 1
        var item = items1[indices.oldIndex];

        // add it to the new index in list 2
        items2.Insert(indices.newIndex, item);

        // remove the item from the old index in list 1
        items1.Remove(items1[indices.oldIndex]);
    }

    private void ListTwoRemove((int oldIndex, int newIndex) indices)
    {
        // get the item at the old index in list 2
        var item = items2[indices.oldIndex];

        // add it to the new index in list 1
        items1.Insert(indices.newIndex, item);

        // remove the item from the old index in list 2
        items2.Remove(items2[indices.oldIndex]);
    }
}
